<template>
  <ZoneContent
    v-model:list="zoneList"
    @loadMore="handleLoadMore"
    :loading="loading"
    :total="total"
    :pageInfo="pageInfo"
  />
  <div class="fixed right-0 bottom-0 p-50px">
    <AuthComponents @onClick="handlePublish">
      <button
        class="box-border h-50px w-50px rounded-[50%] bg-gradient-to-r from-#FF4DC4 to-#7733FF text-14px font-bold text-white hover:scale-105 transition"
      >
        发布
      </button>
    </AuthComponents>
  </div>
  <AddZone v-model:visible="addZoneVisible" @ok="handleOk" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getZoneList } from '@/api/zone'
import { useUserStore } from '@/store'
import ZoneContent from './zone-content.vue'
import AddZone from './add-zone.vue'
const addZoneVisible = ref(false)

const { userInfo } = useUserStore()
const zoneList = ref([])
const loading = ref(false)
const total = ref(0)
const bagePageInfo = {
  page: 0,
  pageSize: 10
}
const pageInfo = ref(bagePageInfo)
const handleLoadMore = () => {
  loading.value = true
  getData().finally(() => {
    loading.value = false
  })
}
const getData = () => {
  return getZoneList({
    ...pageInfo.value,
    page: pageInfo.value.page + 1,
    id: userInfo.user_id
  }).then((res) => {
    pageInfo.value.page = res.page
    pageInfo.value.pageSize = res.pageSize
    zoneList.value = [...zoneList.value, ...res.list]
    total.value = res.total
  })
}
const handlePublish = () => {
  addZoneVisible.value = true
}
const handleOk = (zone) => {
  console.log(zone)
  zoneList.value.unshift(zone)
  addZoneVisible.value = false
}
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped></style>
